<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>closure-2</title>
</head>
<body>
<p id="help">Helpful notes will appear here</p>
<p>E-mail: <input type="text" id="email" name="email"></p>
<p>Name: <input type="text" id="name" name="name"></p>
<p>Age: <input type="text" id="age" name="age"></p>
</body>
<script>
    function showHelp(help) {
        document.getElementById('help').innerHTML = help;
    }

    function makeHelpCallback(help) {
        return function() {
            showHelp(help);
        };
    }

    function setupHelp() {
        var helpText = [
            {'id': 'email', 'help': 'Your e-mail address'},
            {'id': 'name', 'help': 'Your full name'},
            {'id': 'age', 'help': 'Your age (you must be over 16)'}
        ];

        for (var i = 0; i < helpText.length; i++) {
            var item = helpText[i];
            document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
        }
    }

    setupHelp();
</script>
</html>